<!-- main -->
<template>
  <div>
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix" style="border-bottom: none;">
        <el-button class="leftBtn" type="warning" icon="el-icon-circle-plus-outline" @click="openFn">新增</el-button>
      </div>
      <el-table :data="list">
        <el-table-column label="序号" width="60" type="index" />
        <el-table-column label="区域名称" prop="name" />
        <el-table-column label="点位数" prop="nodeCount" />
        <el-table-column label="备注说明" prop="remark" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="getDetails(scope.row.id)">查看详情</el-button>
            <el-button type="text" @click="updataFn(scope.row.id)">修改</el-button>
            <el-button type="text" style="color: red" @click="openDel">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <TabfooterBtn
        :params="params"
        :total-count="totalCount"
        :total-page="totalPage"
        @nextPageFn="pageFn"
        @prevPageFn="pageFn"
      />
    </el-card>
    <RegionDialog
      ref="dialogRef"
      :region-visible="regionVisible"
      :region-id="regionId"
      :is-show="isShow"
      @close="regionClose"
      @addRegion="addRegion"
    />
  </div>
</template>

<script>
import { regionSearch } from '@/api'
import RegionDialog from './regionDialog.vue'
export default {
  components: {
    RegionDialog
  },

  props: {

  },
  data() {
    return {
      totalCount: 0,
      totalPage: 0,
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      list: [],
      regionVisible: false,
      regionId: '',
      isShow: false
    }
  },
  computed: {

  },
  created() {
    this.fetchRegionList(this.params)
  },
  methods: {
    async fetchRegionList(obj) {
      const res = await regionSearch(obj)
      // console.log(res.data.currentPageRecords)
      this.list = res.data.currentPageRecords
      this.totalCount = +res.data.totalCount
      this.totalPage = +res.data.totalPage
    },
    // region区域搜索渲染
    regionSearch(obj) {
      this.fetchRegionList({ ...this.params, ...obj })
    },
    // 下一页
    pageFn(val) {
      // console.log(val)
      this.params.pageIndex = val
      // console.log(this.params)
      this.fetchRegionList(this.params)
    },
    // regionDialog关闭
    regionClose() {
      this.regionVisible = false
      this.isShow = false
    },
    // dialog打开
    openFn() {
      this.regionVisible = true
    },
    // 新增页面
    addRegion() {
      // this.params.pageIndex = this.totalPage
      this.fetchRegionList(this.params)
    },
    // 查看详情
    getDetails(id) {
      this.regionId = id
      // this.regionVisible = false
      this.isShow = true
    },
    // 修改页面
    updataFn(id) {
      // console.log(scope)
      // this.regionId = id
      // console.log(this.regionId)
      this.regionVisible = true
      this.$refs.dialogRef.updataOpenFn(id)
    },
    // 删除函数
    openDel() {
      this.$notify.info({
        title: '提示',
        message: '不支持此操作'
      })
    }

  }
}

</script>
<style lang='scss' scoped>
.clearfix {

  .leftBtn {
    float: left;
    padding: 3px 0;
    height: 40px;
    width: 100px;
  }
}
::v-deep .el-card__header {
    border-bottom: none;
}

</style>
